<template>
	<div class="row-item">
		<div
			v-for="(headerItem, headerIndex) in header"
			:key="headerIndex"
			class="col-item"
			:style="{
				width: headerItem.width === '100%' ? 'auto' : headerItem.width,
				flexGrow: headerItem.width === '100%' ? 1 : 0,
				justifyContent: setTextAlign(headerItem.align),
				flexShrink: headerItem.width === '100%' ? 1 : 0
			}"
		>
			{{ headerItem.title }}
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            header: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        methods: {
            setTextAlign(align) {
                let alignStr = '';
                if (align) {
                    if (align === 'left') {
                        alignStr = 'flex-start';
                    } else if (align === 'right') {
                        alignStr = 'flex-end';
                    } else if (align === 'center') {
                        alignStr = 'center';
                    }
                } else {
                    alignStr = 'flex-start';
                }
                return alignStr;
            }
        }
    };
</script>
<style scoped lang="scss">
.row-item {
    display: flex;
    align-items: center;
    height: 100%;
    .col-item {
        border-right: solid 1px #e8eaec;
        padding: 0 8px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
}
.row-item .col-item:last-child {
    border-right: none;
}
</style>
